<template>
  <div class="w-full h-full flex justify-between items-center truncate">
    <div
      class="flex items-center truncate"
      :title="`${value.mc || ''} ${value.jl || ''} ${value.yf || ''} ${value.gg || ''} ${record.modelNo || ''} ${value.cj || ''} ${value.pl || ''}`"
    >
      <div>{{ value.mc }}</div>
      <div v-if="value.jl" :title="value.jl" class="text-gray-400 ml-2 text-xs">{{ value.jl }}</div>
      <div v-if="value.yf" :title="value.yf" class="text-gray-400 ml-2 text-xs">{{ value.yf }}</div>
      <div v-if="value.gg" :title="value.gg" class="text-gray-400 ml-2 text-xs">{{ value.gg }}</div>
      <div v-if="record.modelNo && record.xmlb === 30" :title="record.modelNo" class="text-gray-400 ml-2 text-xs">{{ record.modelNo }}</div>
      <div v-if="value.cj" :title="value.cj" class="text-gray-400 ml-2 text-xs max-w-[64px] truncate">{{ value.cj }}</div>
      <div v-if="value.pl" :title="value.pl" class="text-gray-400 ml-2 text-xs max-w-[64px] truncate">{{ value.pl }}</div>
      <a-button v-if="value.skinTestFlag === 1" type="primary" shape="circle" size="small" class="bg-red-500 ml-10">皮</a-button>
      <a-button v-if="!isArmy && value?.insureStatus === 0" type="primary" shape="circle" size="small" class="bg-orange-400 ml-2">自</a-button>
      <a-popover v-if="record.syzd && [2, 4, 5].includes(record.xmlb) && ['门诊医嘱项目', '处方'].includes(type)">
        <template #content>
          <div class="py-2 px-4">{{ record.syzd }}</div>
        </template>
        <a-button size="small" class="bg-white sticky right-0" type="link">使用指导</a-button>
      </a-popover>
    </div>
    <div>
      <slot name="suffix"></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  value: {
    type: Object,
    default: () => ({ mc: '', gg: '', cj: '' })
  },
  record: {
    type: Object,
    default: () => ({})
  },
  type: {
    type: String,
    default: ''
  }
})
const isArmy = getSystemConfig('NAVYHIS_MODE') === '1'
</script>
<style lang="less" scoped></style>
